<template>
    <el-row class="padd20">
        <el-row>
            <el-col>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>班级信息</el-breadcrumb-item>
                    <el-breadcrumb-item>{{classInfo.className}}</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
            <el-col :span="24" class="bottom padd20 mt20 mr10">
                <el-col class="btn box box-pack-between">
                    <div class="box box-tb box-pack-start box-align-start">
                        <h3>成员列表</h3>
                    </div>
                </el-col>
                <el-col>
                    <el-table :data="stuList" style="width: 100%" height="630">
                        <el-table-column type="index" label="序号" width="120" align="center">
                            <template slot-scope="scope">
                                <div>{{scope.$index + 1}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" align="left">
                            <template slot-scope="scope">
                                <el-col class="box box-align-center box-pack-start">
                                    <el-avatar :size="number" :src="scope.row.icon" class="mr10"></el-avatar>
                                    <span>{{scope.row.name}}</span>
                                </el-col>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sn" label="学号" width="150" align="center">
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-col>
            <!-- <el-col :span="6" class="btn bottom mt20 box box-tb box-pack-end box-align-end padd20">
                <el-col class="btn box box-pack-between box-align-start">
                    <div class="box box-tb box-pack-start box-align-start">
                        <h3>评分小组</h3>
                    </div>
                    <div class="edit box-pack-center box-align-start cp" @click="addPfUser()">
                        <i class="el-icon-edit"></i>
                    </div>
                </el-col>
                <el-col class="box box-pack-between box-align-center padd20" v-for="(item,index) in egList"
                    :key="index">
                    <div class="box box-pack-start box-align-center">
                        <el-avatar :size="size"
                            :src="item.icon">
                        </el-avatar>
                        <span class="ml20">{{item.name}}</span>
                        <span class="tabs">{{item.roleName}}</span>
                    </div>

                    <span v-if="item.roleName != '组长' && zzNum == 0"  class="set-leader" @click="handleSetLeader(item)">设为组长</span>
                    <span class="cp" v-if="item.roleName == '组长'" @click="handleDeleteLeader(item)">取消组长</span>

                </el-col>
            </el-col> -->
        </el-row>

        <addMember @update="classStuList" :classid="classInfo.classid" :dialogVisible="show" @clickClose="clickClose()" ref="child"></addMember>
    </el-row>
</template>

<script>
    import addMember from './components/addmember.vue';
    export default {
        components: {
            addMember
        },
        data() {
            return {
                classInfo:{},
                stuList:[],
                egList:[],
                show: false,
                zzNum:0,

                size: 34,
                number: 34,
            };
        },
        created() {
           this.classInfo = JSON.parse(localStorage.getItem('classInfo'));
        },
        mounted() {
            this.classStuList();
        },
        methods: {
            classStuList() {
                let params = {
                    classid:this.classInfo.classid
                };
                this.$api.tr.classStuList(params).then(res => {
                    if (res.code == '0') {
                        this.stuList = res.stuList;
                        this.egList = res.egList;
                        this.zzNum = res.zzNum;
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
            },
            addPfUser(){
                this.$refs.child.egStuList();
                this.show = true;
            },
            //关闭弹框
            clickClose() {
                this.show = false
            },
            //设为组长
            handleSetLeader(item) {
                this.$confirm(`是否取消  ${item.name}  组长`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                var params= {
                    classId:this.classInfo.classid,
                    userid:item.id,
                    type:1
                };
                this.$api.tr.changeEgZz(params).then(res => {
                    if (res.code == '0') {
                        this.$message.success('操作成功！');
                        this.classStuList();
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
                });
            },
            //取消组长
            handleDeleteLeader(item) {
                this.$confirm(`是否将  ${item.name}  设为组长`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {

                let params = {
                    classId:this.classInfo.classid,
                    userid:item.id,
                    type:0
                };
                this.$api.tr.changeEgZz(params).then(res => {
                    if (res.code == '0') {
                        this.classStuList();
                        this.$message.success('操作成功！');
                    } else {
                        this.$message.error('请求失败！');
                    }
                })
                }).catch();
            },
        }
    }
</script>

<style scoped lang="scss">
    .bottom {
        background-color: #fff;

        &>>>.el-table td,
        .el-table th.is-leaf {
            border: none;
        }

        .tabs {
            margin-left: 5px;
            width: 41px;
            height: 20px;
            line-height: 20px;
            background: #FBEFE3;
            border-radius: 10px;
            color: #FF9B4F;
            font-size: 13px;
        }

        .edit {
            width: 40px;
            height: 40px;

            i {}
        }

        .set-leader {
            display: block;
            width: 70px;
            height: 20px;
            line-height: 20px;
            background: #FF9B4F;
            border-radius: 10px;
            color: #fff;
            font-size: 12px;
            cursor: pointer;
        }
    }
</style>
